<template>
    <view class="page">
		
		<!-- <image class="backImag" mode="aspectFill"
		src="../../static/headPic.jpg"></image> -->
		
		<movable-area :style="{ width: getPersentageW(100) + 'px' , height: getPersentageH(50) + 'px'}">
			<image class="bgc-img" :src="bgImg" :style="{ width: getPersentageW(100) + 'px' , height: getPersentageH(50) + 'px'}"
			mode="scaleToFill"
			></image>
			<movable-view 
			@touchend="moveEnd"
			:x="x" :y="y"
			direction="horizontal" 
			:inertia="false" @change="onChange">
				<canvas class="myCanvas"
				:style="{top: getPersentageH(canvasH) +'px', left: slidX+'px',width: sliderBlockWidth + 'rpx', height: sliderBlockWidth +'rpx'}" 
				style="background-color: #DD524D;"
				canvas-id="myCanvas"></canvas>
			</movable-view>
			<image
			:style="{
			top: getPersentageH(canvasH) +'px', 
			left: getSlideW(successNumber) +'px',
			width: sliderBlockWidth + 'rpx', 
			height: sliderBlockWidth +'rpx'}" 
			 class="showPic"></image>
		</movable-area>
		
		
		
		<!-- <view class="content" style="overflow: hidden; margin-top: 120rpx;"> -->
			<!-- <view class="slider-container" :style="{backgroundColor:sliderBlockBg,touchAction: 'none'}">
				<view class="" style="height: 100%;font-size: 26rpx;color: #000;text-align: center;line-height: 90rpx;">
					{{value==successNumber?successText:initText}}
				</view>
				<view class="front" :style="{width: value+'%',backgroundColor:forntBg}">
					
				</view>
				<view class="slider-block" :style="{left:!value?'0':'calc('+value+'% - '+sliderBlockWidth+'rpx)',width:sliderBlockWidth+'rpx'}">
					>>
				</view>
				<slider :value="value" @change="sliderChange" :disabled="disabled" activeColor="transparent" @changing="changing" block-color="transparent" :block-size="35" backgroundColor="transparent" style="position: absolute;top:6rpx;left: 0;z-index: 5;width: 88%;" />
			</view> -->
			<!-- <view>
				<slider 
				style="width: 80%;margin:0 auto;"
				:step="2"
				:value="value" @change="sliderChange" @changing="changing" :block-size="35"/>
			</view> -->
			
		</view>
	
		
    </view>
</template>

<script>
	var _self
	
	export default {
		data() {
			return {
				scrX: 0, // 截图部分的x轴坐标 单位px 
				scrY: 25, // 截图部分的y轴坐标 
				showPic: '', // 用于展示截取部分的图片地址
				slidX: 0, // 滑块移动X坐标 单位px
				slidY: 100, // 滑块y轴坐标 单位px
				reset: true, //成功后是否重置
				value:0,
				disabled:false,
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0,
				}
			}
		},
		props:{
			// 使用的图片
			bgImg: {
				type: String,
				default: '../../static/head.png'
			},
			//滑动成功百分比 范围0-100
			successNumber: {
				type: Number,
				default: 100
			},
			// 截图位置距离顶部高度（占屏幕的百分比）范围0-50
			canvasH: {
				type: Number,
				default: 25
			},
			//允许误差范围 单位px
			allowError: {
				type: Number,
				default: 3
			},
			//滑动栏颜色
			sliderBlockBg: {
				type: String,
				default: '#dae2d0'
			},
			//滑块宽度 也是截图的宽度 单位rpx 最大80
			sliderBlockWidth: {
				type: Number,
				default: 80
			},
			//滑块滑动后的颜色
			forntBg: {
				type: String,
				default: '#55ffff'
			},
			//未滑动的验证文案
			initText: {
				type: String,
				default: '向右拖动滑块填充拼图'
			},
			//验证成功文案
			successText: {
				type: String,
				default: '校验成功'
			}
		},
		beforeCreate() {
			_self = this
		},
		mounted(){
			this.draw()
		},
		methods: {
			// 根据百分百计算页面高度 单位px
			getPersentageH(p){
				p = p /100
				// let h = uni.getSystemInfoSync().screenHeight/(uni.upx2px(100)/100)
				let h = uni.getSystemInfoSync().screenHeight
				return parseInt((h-_self.sliderBlockWidth) * p)
			},
			// 根据百分百计算计算页面宽度 单位px
			getPersentageW(p){
				p = p /100
				let w = uni.getSystemInfoSync().screenWidth
				return parseInt(w * p)
			},
			// 根据百分百计算滑动宽度 单位px
			getSlideW(p){
				p = p /100
				var w  = uni.getSystemInfoSync().screenWidth
				var px = uni.upx2px(_self.sliderBlockWidth)
				return parseInt((w-px) * p)
			},
			// 画布方法
			draw(){
				/* 创建canvas实例 */
				var ctx = uni.createCanvasContext('myCanvas')
				/* 绘制背景图 */
				ctx.drawImage(_self.bgImg, -1*_self.getSlideW(_self.successNumber), -1*_self.getPersentageH(_self.canvasH),this.getPersentageW(100),this.getPersentageH(50))
				ctx.save()
				ctx.draw()
				// 保存截图
				this.save_temp()
			},  
			// 保存截图
			save_temp(){
				// console.log('保存了')
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: res => {
						// console.log(res.tempFilePath)
						// 保存图片地址
						this.showPic = res.tempFilePath
					},
					fail: err => console.log(err)
				})
			},
			// 滑动条滑动触发
			// onChange: function(e){
			// 	// this.value=e.detail.value
			// 	// this.slidX = this.getSlideW(this.value)
			// 	console.log(e.detail.x)
			// },
			tap: function(e) {
				// 解决view层不同步的问题
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 0
					this.y = 0
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
				// console.log(e.detail.x+','+e.detail.y)
				
			},
			moveEnd(){
				// x最大为286
				// 获取可移动最大宽度 px
				var wid = uni.getSystemInfoSync().screenWidth-uni.upx2px(this.sliderBlockWidth)
				// 获取可选范围
				var max = wid*this.successNumber/100
				if(max-this.allowError <= this.old.x && max+this.allowError >=this.old.x){
					this.$emit('success')
					setTimeout(()=>{
						// 滑块复位
						this.tap()
					},1500)
				}else{
					this.$emit('refresh')
					this.tap()
				}
				// console.log('停下了')
			},
			// 滑动验证
			// sliderChange(e){
			// 	// console.log(e.detail.value)
			// 	if(this.successNumber-this.allowError <= e.detail.value && e.detail.value <= this.successNumber+this.allowError){
			// 		_self.value=e.detail.value
			// 		this.$emit('success')
			// 		// console.log('验证成功')
			// 		if(!_self.reset){
			// 			_self.disabled=true
			// 			return
			// 		}
			// 		setTimeout(()=>{
			// 			// 滑块复位
			// 			_self.value=0
			// 			_self.slidX=0
			// 		},1500)
			// 	}else{
			// 		_self.value=e.detail.value
			// 		this.$emit('refresh')
			// 		_self.$nextTick(()=>{
			// 			_self.value=0
			// 			_self.slidX=0
			// 		})
			// 	}
				
			// }
		
		}
	}
</script>

<style lang="scss">
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		width: 80rpx;
		// background-color: #007AFF;
		// color: #fff;
		z-index: 2;
	}
	
	movable-area {
		height: 50%;
		width: 100%;
		// background-color: #D8D8D8;
		overflow: hidden;
	}
	
	.myCanvas {
		position: absolute;
		/* background-color: #20B2AA; */
		z-index: 1;
	}
	
	.buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 10px;
		margin: 50rpx 0;
	}
	
	button{
		height: 100rpx;
		width: 200rpx;
	}
	
	.showPic {
		margin-bottom: 10px;
		/* 添加阴影 */
		background-color: rgba(0,0,0,0.4);
		// border: 1px solid;
		position: absolute;
	}
	
	.bgc-img {
		background-size: cover;
		position: relative;
	}
	
	
	.slider-container {
		position: relative;
		border: 2rpx solid #C0C0C0;
		height: 90rpx;
		border-radius: 4rpx;
		overflow: hidden;
		width: 100%;
		/deep/.uni-slider-thumb{
			box-shadow: none;
		}
		.slider-block{
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			color: #787878;
			border-right: 1px solid #cccccc;
			line-height: 80rpx;
			background-color: #fff;
			text-align: center;
			max-width: 80rpx;
		}
		.front{
			height:100%;
			position:absolute;
			top:0;left:0;
			opacity:0.8;
		}
	}
	
</style>
